<template>
  <div class="auto">
    <validator name='v'>
      <form novalidate class="form-horizontal select-overspread" id="help-info-form">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">自助信息</a></li>
        </ul>
        <div class="form-group">
          <div :class="[$v.f_allowed_user.required ? 'has-error' : 'has-success']">
            <label for="f_allowed_user"  class=" col-sm-2 control-label">授权用户</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_allowed_user" id="f_allowed_user"
                     v-validate:f_allowed_user='{required: true }' :disabled='model.f_state === "无效"' placeholder="授权用户名">
            </div>
          </div>
          <div :class="[$v.f_allowed_company.required ? 'has-error' : 'has-success']">
            <label for="f_allowed_company"  class=" col-sm-2 control-label">授权公司</label>
            <div class="col-sm-3">
              <input class="form-control" type="text" v-model="model.f_allowed_company" id="f_allowed_company"
                     v-validate:f_allowed_company='{required: true }' :disabled='model.f_state === "无效"' placeholder="授权公司名称">
            </div>
          </div>
        </div>
          <div class="form-group">
            <div :class="[$v.f_password.required ? 'has-error' : 'has-success']">
              <label for="f_password"  class=" col-sm-2 control-label">授权密码</label>
              <div class="col-sm-3">
                <input class="form-control" type="password" v-model="model.f_password" id="f_password"
                       v-validate:f_password='{required: true }' :disabled='model.f_state === "无效"' placeholder="授权密码">
              </div>
            </div>
            <div :class="[$v.f_operator.required ? 'has-error' : 'has-success']">
              <label for="f_operator"  class=" col-sm-2 control-label">操作人员</label>
              <div class="col-sm-3">
                <input class="form-control" type="text" v-model="model.f_operator" id="f_operator"
                       v-validate:f_operator='{required: true }' :disabled='model.f_state === "无效"' placeholder="操作人员" readonly="true" >
              </div>
            </div>
          </div>
      </form>
      <div style="text-align:right;height:auto;margin-top:6px;margin-right:50px;" v-if="model.f_state !== '无效'">
        <button class="btn btn-success width-60" @click="confirm()"  :disabled='!$v.valid' id="comprehen-helpinfo-确认">确认
        </button>
        <button class="btn btn-default width-60" @click="close()" id="comprehen-helpinfo-取消">取消
        </button>
        <button class="btn btn-danger width-60" v-show="delButton" @click="del()" id="comprehen-helpinfo-删除">删除
        </button>
      </div>
    </validator>
  </div>
</template>

<script>
  export default {
    title: 'HelpInfo',
    data () {
      return {
        delButton: false,
        model: {
          id: '',
          f_allowed_user: '',
          f_allowed_company: '',
          f_password: '',
          f_operator: ''
        }
      }
    },
    watch: {

    },
    methods: {
      confirm () {
        this.$LogicService.helpInfo(this.model).then((res) => {
          this.$dispatch('success', '自助信息', this.data, res)
        }).catch((error) => {
          this.$dispatch('error', '自助信息', this.data, error)
        })
        this.clear()
      },
      clear () {
        this.model = {
          id: '',
          f_allowed_user: '',
          f_allowed_company: '',
          f_password: '',
          f_operator: ''
        }
      },
      close () {
        this.$dispatch('close')
      },
      del () {
        this.$dispatch('del', this.model)
      }
    }
  }
</script>

<style scoped>

</style>
